<template>
  <el-row>
    <el-form :inline="true" :model="queryPostForm" class="demo-form-inline">
      <el-form-item label="岗位编码">
        <el-input v-model="queryPostForm.postCode" placeholder="请填写岗位编码"></el-input>
      </el-form-item>
      <el-form-item label="岗位名称">
        <el-input v-model="queryPostForm.postName" placeholder="请输入岗位名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryPostForm.status" placeholder="请选择岗位状态">
          <el-option label="正常" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-permission="'sys:post:list'" type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <el-row>
    <el-button v-permission="'sys:post:add'" type="primary" :icon="Plus" @click="handleAddPost">新增</el-button>
  </el-row>
  <el-row>
    <el-table :data="postTableData" style="width: 100%; margin-bottom: 20px">
      <el-table-column prop="id" label="索引" width="220"/>
      <el-table-column prop="postCode" label="岗位编码" width="180"/>
      <el-table-column prop="postName" label="岗位名称" width="180"/>
      <el-table-column prop="sort" label="显示顺序" width="180"/>
      <el-table-column prop="status" label="状态 " width="180">
        <template #default="scope">
          <span v-if="scope.row.status === 1">正常</span>
          <span v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"/>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button v-permission="'sys:post:edit'" size="small" @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button v-permission="'sys:post:delete'" size="small" type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pageSize"
                   :current-page="page.current">
    </el-pagination>
  </el-row>

  <el-dialog v-model="dialogVisible">
    <mine-post-add :post-form-data="postFormData"></mine-post-add>
  </el-dialog>
</template>
<script>
import {onMounted, ref, getCurrentInstance} from 'vue'
import * as postApi from '@/api/system/post/index'
import MinePostAdd from "@/views/system/post/components/mine-post-add";

import {ElMessage, ElMessageBox} from "element-plus"


import {Plus} from "@element-plus/icons-vue/dist/index.mjs"




export default {
  name: "index",
  components: {MinePostAdd},
  setup() {
    const {ctx, proxy} = getCurrentInstance();

    const queryPostForm = ref({})
    const createTimeRange = ref([])
    const postTableData = ref([])
    const postFormData = ref({})
    const dialogVisible = ref(false)
    const page = ref({
      total: 0,
      pageSize: 1,
      current: 1
    })

    const onQuery = () => {
      initPostTable(queryPostForm.value)
    }
    const handleAddPost = () => {
      postFormData.value = {
        parentId: "",
        sort: 1,
        status: 1,
        sex: 2
      }
      dialogVisible.value = true
    }

    const handleEdit = (index, row) => {
      postFormData.value = row
      dialogVisible.value = true
    }
    const handleDelete = (index, row) => {
      ElMessageBox.confirm(
          '确定要删除当前数据吗？',
          '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
        postApi.removeById(row.id).then(res => {
          if (res.success) {
            ElMessage({
              message: res.msg,
              type: 'success',
            })
            initPostTable()
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      }).catch(() => {

      })
    }
    const initPostTable = (params) => {
      postApi.postList(params).then(res => {
        if (res.success) {
          postTableData.value = res.data.records
          page.value.current = res.data.current
          page.value.pageSize = res.data.size
          page.value.total = res.data.total
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }
    proxy.$bus.on('submitPostSuccess', data => {
      dialogVisible.value = false
      initPostTable()
    })

    onMounted(() => {
      initPostTable()
    })
    return {
      queryPostForm,
      createTimeRange,
      postTableData,
      postFormData,
      dialogVisible,
      page,
      onQuery,
      handleEdit,
      handleDelete,
      handleAddPost
    }
  }
}
</script>

<style scoped>

.el-input .el-select {
  width: 200px;
}

.el-date-editor {
  width: 200px;
}

</style>
